<template>
  <view class="min-h-screen w-full max-w-[750rpx] bg-gray-50 mx-auto">
    <backView />
    
    <!-- 页面标题 -->
    <view class="bg-[#27c530] text-white p-[30rpx] rounded-b-[20rpx]">
      <text class="text-[32rpx] font-bold text-center block">全面健康评估</text>
      <text class="text-[24rpx] text-center block mt-[8rpx] opacity-90">证件号码: {{ idNumber }}</text>
    </view>

    <view class="p-[24rpx] pb-[120rpx]">
      <!-- 基本信息 -->
      <view class="bg-white rounded-[20rpx] shadow-md mb-[24rpx] overflow-hidden">
        <view class="bg-[#f8f9fa] p-[24rpx] border-b border-gray-100">
          <text class="text-[28rpx] font-bold text-gray-800">基本信息</text>
        </view>
        <view class="p-[24rpx] space-y-[24rpx]">
          <view v-if="formData">
            <ItemWithImagesCard
              :model-value="{ title: '', description: formData?.visitTime || '', images: formData?.visitTimeImages || [] }"
              @update:model-value="(data) => { medicalRecordStore.updateField('visitTime', data.description); if (data.images?.length) medicalRecordStore.updateField('visitTimeImages', data.images); }"
              :show-title="false"
              description-label="就诊时间"
              description-placeholder="请输入就诊时间"
              :description-rows="2"
              border-color="border-blue-300"
            />
          </view>
          <view v-if="formData">
            <ItemWithImagesCard
              :model-value="{ title: '', description: formData?.chiefComplaint || '', images: formData?.chiefComplaintImages || [] }"
              @update:model-value="(data) => { medicalRecordStore.updateField('chiefComplaint', data.description); if (data.images?.length) medicalRecordStore.updateField('chiefComplaintImages', data.images); }"
              :show-title="false"
              description-label="主诉-症状和体征"
              description-placeholder="请输入主诉-症状和体征"
              :description-rows="3"
              border-color="border-purple-300"
            />
          </view>
        </view>
      </view>

      <!-- 诊断信息 -->
      <view class="bg-white rounded-[20rpx] shadow-md mb-[24rpx] overflow-hidden">
        <view class="bg-[#f8f9fa] p-[24rpx] border-b border-gray-100">
          <text class="text-[28rpx] font-bold text-gray-800">诊断信息</text>
        </view>
        <view class="p-[24rpx] space-y-[24rpx]">
          <ItemWithImagesCard
            :model-value="{ title: '', description: formData.diagnosisResult || '', images: formData.diagnosisResultImages || [] }"
            @update:model-value="(data) => { medicalRecordStore.updateField('diagnosisResult', data.description); if (data.images?.length) medicalRecordStore.updateField('diagnosisResultImages', data.images); }"
            :show-title="false"
            description-label="诊断结果"
            description-placeholder="请输入诊断结果"
            :description-rows="2"
            border-color="border-green-300"
          />
          <ItemWithImagesCard
            :model-value="{ title: '', description: formData.diagnosisBasis || '', images: formData.diagnosisBasisImages || [] }"
            @update:model-value="(data) => { medicalRecordStore.updateField('diagnosisBasis', data.description); if (data.images?.length) medicalRecordStore.updateField('diagnosisBasisImages', data.images); }"
            :show-title="false"
            description-label="诊断依据"
            description-placeholder="请输入诊断依据"
            :description-rows="3"
            border-color="border-teal-300"
          />
        </view>
      </view>

      <!-- 医疗机构信息 -->
      <view class="bg-white rounded-[20rpx] shadow-md mb-[24rpx] overflow-hidden">
        <view class="bg-[#f8f9fa] p-[24rpx] border-b border-gray-100">
          <text class="text-[28rpx] font-bold text-gray-800">医疗机构信息</text>
        </view>
        <view class="p-[24rpx] space-y-[24rpx]">
          <ItemWithImagesCard
            :model-value="{ title: '', description: formData.hospital || '', images: formData.hospitalImages || [] }"
            @update:model-value="(data) => { medicalRecordStore.updateField('hospital', data.description); if (data.images?.length) medicalRecordStore.updateField('hospitalImages', data.images); }"
            :show-title="false"
            description-label="就诊医院/机构"
            description-placeholder="请输入就诊医院/机构"
            :description-rows="2"
            border-color="border-blue-300"
          />
          <ItemWithImagesCard
            :model-value="{ title: '', description: formData.department || '', images: formData.departmentImages || [] }"
            @update:model-value="(data) => { medicalRecordStore.updateField('department', data.description); if (data.images?.length) medicalRecordStore.updateField('departmentImages', data.images); }"
            :show-title="false"
            description-label="就诊科室"
            description-placeholder="请输入就诊科室"
            :description-rows="2"
            border-color="border-purple-300"
          />
        </view>
      </view>

      <!-- 全科健康评估 -->
      <view class="bg-white rounded-[20rpx] shadow-md mb-[24rpx] overflow-hidden">
        <view class="bg-[#f8f9fa] p-[24rpx] border-b border-gray-100">
          <text class="text-[28rpx] font-bold text-gray-800">全科健康评估</text>
        </view>
        <view class="p-[24rpx]">
          <nut-button 
            type="primary" 
            size="large" 
            block 
            @click="goToSubForm('allCareAssessment')"
            class="mb-[16rpx]"
          >
            全面健康评估
          </nut-button>
          <nut-button 
            type="success" 
            size="large" 
            block 
            @click="goToSubForm('homeCareAssessment')"
            class="mb-[16rpx]"
          >
            居家护理专项评估
          </nut-button>
          <nut-button 
            type="warning" 
            size="large" 
            block 
            @click="goToSubForm('historicalHealthAssessments')"
          >
            历史健康评估归档
          </nut-button>
        </view>
      </view>

      <!-- 专科评估 -->
      <view class="bg-white rounded-[20rpx] shadow-md mb-[24rpx] overflow-hidden">
        <view class="bg-[#f8f9fa] p-[24rpx] border-b border-gray-100">
          <text class="text-[28rpx] font-bold text-gray-800">专科评估</text>
        </view>
        <view class="p-[24rpx]">
          <ItemWithImagesCard
            :model-value="{ title: '', description: formData.specialistAssessment || '', images: formData.specialistAssessmentImages || [] }"
            @update:model-value="(data) => { medicalRecordStore.updateField('specialistAssessment', data.description); if (data.images?.length) medicalRecordStore.updateField('specialistAssessmentImages', data.images); }"
            :show-title="false"
            description-label="专科评估"
            description-placeholder="请输入专科评估内容"
            :description-rows="4"
            border-color="border-indigo-300"
          />
        </view>
      </view>

      <!-- 治疗计划与方案 -->
      <view class="bg-white rounded-[20rpx] shadow-md mb-[24rpx] overflow-hidden">
        <view class="bg-[#f8f9fa] p-[24rpx] border-b border-gray-100">
          <text class="text-[28rpx] font-bold text-gray-800">治疗计划与方案</text>
        </view>
        <view class="p-[24rpx]">
          <ItemWithImagesCard
            :model-value="{ title: '', description: formData.specialistAssessment || '', images: formData.specialistAssessmentImages || [] }"
            @update:model-value="(data) => { medicalRecordStore.updateField('specialistAssessment', data.description); if (data.images?.length) medicalRecordStore.updateField('specialistAssessmentImages', data.images); }"
            :show-title="false"
            description-label="专科评估"
            description-placeholder="请输入专科评估内容"
            :description-rows="4"
            border-color="border-indigo-300"
          />
        </view>
      </view>

      <!-- 治疗计划与方案 -->
      <view class="bg-white rounded-[20rpx] shadow-md mb-[24rpx] overflow-hidden">
        <view class="bg-[#f8f9fa] p-[24rpx] border-b border-gray-100">
          <text class="text-[28rpx] font-bold text-gray-800">治疗计划与方案</text>
        </view>
        <view class="p-[24rpx] space-y-[24rpx]">
          <ItemWithImagesCard
            :model-value="{ title: '', description: formData.prescription || '', images: formData.prescriptionImages || [] }"
            @update:model-value="(data) => { medicalRecordStore.updateField('prescription', data.description); if (data.images?.length) medicalRecordStore.updateField('prescriptionImages', data.images); }"
            :show-title="false"
            description-label="处方"
            description-placeholder="请输入处方内容"
            :description-rows="3"
            border-color="border-blue-300"
          />
          <ItemWithImagesCard
            :model-value="{ title: '', description: formData.disposition || '', images: formData.dispositionImages || [] }"
            @update:model-value="(data) => { medicalRecordStore.updateField('disposition', data.description); if (data.images?.length) medicalRecordStore.updateField('dispositionImages', data.images); }"
            :show-title="false"
            description-label="处置"
            description-placeholder="请输入处置内容"
            :description-rows="3"
            border-color="border-green-300"
          />
          <ItemWithImagesCard
            :model-value="{ title: '', description: formData.healthEducation || '', images: formData.healthEducationImages || [] }"
            @update:model-value="(data) => { medicalRecordStore.updateField('healthEducation', data.description); if (data.images?.length) medicalRecordStore.updateField('healthEducationImages', data.images); }"
            :show-title="false"
            description-label="健康教育"
            description-placeholder="请输入健康教育内容"
            :description-rows="3"
            border-color="border-purple-300"
          />
        </view>
      </view>

      <!-- 手术史 -->
      <view class="bg-white rounded-[20rpx] shadow-md mb-[24rpx] overflow-hidden">
        <view class="bg-[#f8f9fa] p-[24rpx] border-b border-gray-100">
          <text class="text-[28rpx] font-bold text-gray-800">手术史</text>
        </view>
        <view class="p-[24rpx] space-y-[24rpx]">
          <ItemWithImagesCard
            :model-value="{ title: '', description: formData.surgeryName || '', images: formData.surgeryNameImages || [] }"
            @update:model-value="(data) => { medicalRecordStore.updateField('surgeryName', data.description); if (data.images?.length) medicalRecordStore.updateField('surgeryNameImages', data.images); }"
            :show-title="false"
            description-label="手术名称"
            description-placeholder="请输入手术名称"
            :description-rows="2"
            border-color="border-orange-300"
          />
          <ItemWithImagesCard
            :model-value="{ title: '', description: formData.surgeryHospital || '', images: formData.surgeryHospitalImages || [] }"
            @update:model-value="(data) => { medicalRecordStore.updateField('surgeryHospital', data.description); if (data.images?.length) medicalRecordStore.updateField('surgeryHospitalImages', data.images); }"
            :show-title="false"
            description-label="手术医院"
            description-placeholder="请输入手术医院"
            :description-rows="2"
            border-color="border-pink-300"
          />
          <ItemWithImagesCard
            :model-value="{ title: '', description: formData.surgeryTime || '', images: formData.surgeryTimeImages || [] }"
            @update:model-value="(data) => { medicalRecordStore.updateField('surgeryTime', data.description); if (data.images?.length) medicalRecordStore.updateField('surgeryTimeImages', data.images); }"
            :show-title="false"
            description-label="手术时间"
            description-placeholder="请输入手术时间"
            :description-rows="2"
            border-color="border-yellow-300"
          />
        </view>
      </view>

      <!-- 过敏史 -->
      <view class="bg-white rounded-[20rpx] shadow-md mb-[24rpx] overflow-hidden">
        <view class="bg-[#f8f9fa] p-[24rpx] border-b border-gray-100">
          <text class="text-[28rpx] font-bold text-gray-800">过敏史</text>
        </view>
        <view class="p-[24rpx] space-y-[24rpx]">
          <ItemWithImagesCard
            :model-value="{ title: '', description: formData.medicationAllergy || '', images: formData.medicationAllergyImages || [] }"
            @update:model-value="(data) => { medicalRecordStore.updateField('medicationAllergy', data.description); if (data.images?.length) medicalRecordStore.updateField('medicationAllergyImages', data.images); }"
            :show-title="false"
            description-label="药物过敏"
            description-placeholder="请输入药物过敏情况"
            :description-rows="2"
            border-color="border-red-300"
          />
          <ItemWithImagesCard
            :model-value="{ title: '', description: formData.foodAllergy || '', images: formData.foodAllergyImages || [] }"
            @update:model-value="(data) => { medicalRecordStore.updateField('foodAllergy', data.description); if (data.images?.length) medicalRecordStore.updateField('foodAllergyImages', data.images); }"
            :show-title="false"
            description-label="食物过敏"
            description-placeholder="请输入食物过敏情况"
            :description-rows="2"
            border-color="border-yellow-300"
          />
          <ItemWithImagesCard
            :model-value="{ title: '', description: formData.otherAllergy || '', images: formData.otherAllergyImages || [] }"
            @update:model-value="(data) => { medicalRecordStore.updateField('otherAllergy', data.description); if (data.images?.length) medicalRecordStore.updateField('otherAllergyImages', data.images); }"
            :show-title="false"
            description-label="其他过敏情况"
            description-placeholder="请输入其他过敏情况"
            :description-rows="2"
            border-color="border-cyan-300"
          />
        </view>
      </view>

      <!-- 家族病史 -->
      <view class="bg-white rounded-[20rpx] shadow-md mb-[24rpx] overflow-hidden">
        <view class="bg-[#f8f9fa] p-[24rpx] border-b border-gray-100">
          <text class="text-[28rpx] font-bold text-gray-800">家族病史</text>
        </view>
        <view class="p-[24rpx]">
          <ItemWithImagesCard
            :model-value="{ title: '', description: formData.familyHistory || '', images: formData.familyHistoryImages || [] }"
            @update:model-value="(data) => { medicalRecordStore.updateField('familyHistory', data.description); if (data.images?.length) medicalRecordStore.updateField('familyHistoryImages', data.images); }"
            :show-title="false"
            description-label="直系亲属疾病情况"
            description-placeholder="请输入直系亲属疾病情况"
            :description-rows="4"
            border-color="border-green-300"
          />
        </view>
      </view>
    </view>

    <!-- 底部操作按钮 -->
    <view class="fixed bottom-0 left-0 right-0 bg-white p-[24rpx] border-t border-gray-200">
      <view class="flex gap-[16rpx]">
        <nut-button type="default" size="large" @click="goBack" class="flex-1">
          返回
        </nut-button>
        <nut-button type="primary" size="large" @click="saveData" class="flex-1">
          保存
        </nut-button>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import Taro from '@tarojs/taro'
import { useMedicalRecordStore } from '@/store/modules/medicalRecord'
import backView from '@/components/backView.vue'
import ItemWithImagesCard from '@/components/ItemWithImagesCard.vue'

const medicalRecordStore = useMedicalRecordStore()

const idNumber = ref('')

// 先初始化数据，确保 formData 不为空
medicalRecordStore.initializeFormData()

const formData = computed(() => {
  const data = medicalRecordStore.getData
  console.log('computed formData:', data)
  return data || medicalRecordStore.getDefaultFormData()
})

onMounted(() => {
  // 获取路由参数
  const params = Taro.getCurrentInstance().router?.params
  if (params?.idNumber) {
    idNumber.value = params.idNumber
  }
  
  console.log('页面加载完成')
  console.log('formData:', formData.value)
  console.log('medicalRecordStore.getData:', medicalRecordStore.getData)
})

function goToSubForm(type: string) {
  Taro.navigateTo({
    url: `/pages/medical-record/sub-form?type=${type}&idNumber=${idNumber.value}`
  })
}

async function saveData() {
  try {
    await medicalRecordStore.saveToPastMedicalInfo('')
    Taro.showToast({
      title: '保存成功',
      icon: 'success'
    })
  } catch (error) {
    console.error('保存失败:', error)
    Taro.showToast({
      title: '保存失败',
      icon: 'error'
    })
  }
}

function goBack() {
  Taro.navigateBack()
}
</script>


<style scoped lang="scss">
:deep(.nut-textarea) {
  border-radius: 8rpx;
  padding: 12rpx 20rpx;
  background: #f0f0f0;
}
</style>
